<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th>编号</th>
        <th>名称</th>
        <th>单价</th>
        <th>数量</th>
        <th>状态</th>
        <th>小计</th>
      </tr>
    </thead>
    <tbody id="tbody">

    </tbody>
  </table>
  <script>
    // 创建元素来写表格
    var list = [
      {
        "id": 1,
        "title": "笔",
        "price": 2,
        "num": 2,
        "sale": false
      },
      {
        "id": 2,
        "title": "本",
        "price": 1,
        "num": 3,
        "sale": true
      },
      {
        "id": 3,
        "title": "尺子",
        "price": 3,
        "num": 1,
        "sale": true
      }
    ]
    var tbody = document.querySelector('#tbody')
    list.forEach(function (shop) {
      var tr = document.createElement('tr')
      for (var key in shop) {
        var td = document.createElement('td')
        // 判断当前遍历到的key是不是sale
        if (key === 'sale') {
          td.innerHTML = shop.sale ? '已上架' : '未上架'
        } else {
          td.innerHTML = shop[key]
        }
        // 把td放入tr
        tr.appendChild(td)
      }

      // 一行创建结束，还得额外加上一个小计，再创建一个td
      var tdEnd = document.createElement('td')
      tdEnd.innerHTML = shop.price * shop.num
      tr.appendChild(tdEnd)
      //放入tbody里
      tbody.appendChild(tr)
    })
    // 作业就在此基础上扩展：
    // 1、是否上架
    // 2、每一行小计加上
    // 3、计算商品总价
    // 4、计算上架商品的总价
    var allMoney = list.reduce(function (money, shop) {
      return money + shop.price * shop.num
    }, 0)

    // var saleMoney = list.reduce(function (money, shop) {
    //   return money + (shop.sale ? shop.price * shop.num : 0)
    // }, 0)

    // 还可以先把已上架的商品过滤出来在计算
    // filter是返回一个条件，条件为true的保留，false删除
    var saleList = list.filter(function (shop) {
      return shop.sale
    })
    var saleMoney = saleList.reduce(function (money, shop) {
      return money + shop.price * shop.num
    }, 0)


    // var p = document.createElement('p')
    // p.innerHTML = '已上架的总价是：￥' + saleMoney
    // document.body.appendChild(p)
    // var p2 = p.cloneNode() // 浅克隆复制p标签
    // p2.innerHTML = '所有商品的总价是：￥' + allMoney
    // document.body.appendChild(p2)

    // 演示一下文档碎片
    var cache = document.createDocumentFragment()
    var p = document.createElement('p')
    p.innerHTML = '已上架的总价是：￥' + saleMoney
    // 先把p标签放到文档碎片里
    cache.appendChild(p)
    var p2 = p.cloneNode() // 浅克隆复制p标签
    p2.innerHTML = '所有商品的总价是：￥' + allMoney
    cache.appendChild(p2)
    // 最后一次append放进body
    document.body.appendChild(cache)




    // 基础比较好的同学还可以做：
    // 创建改成文档碎片
    

  </script>
</body>
</html>